<template>
	<div class='marker-model'>
		<div class="model-content">
			<!-- 弹框头部 -->
			<div class="alarm-close" @click="closeDialog">
				<i class="el-icon-close"></i>
			</div>
			<div class="alarm-title">
				<span class="title-text">地理位置</span>
			</div>
			<el-amap vid="showamapMark" :zoom="zoom" :center="mapCenter" :events="mapevents" class="amap-mark">
				<el-amap-marker :position="markers.position">
					<div :style="slotStyle" class="mark-icon">
						<i class="el-icon-location" style="font-size: 22px;color: aqua;"></i>
					</div>
				</el-amap-marker>
				<el-amap-info-window :position="mwindows.position" :content="mwindows.content">
				</el-amap-info-window>
			</el-amap>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			latLud: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				zoom: 14,
				markers: {
					position: [121.5273285, 31.21515044],
					visible: true
				},
				mapCenter: [116.602489, 40.080734],
				mwindows: {
					position: [116.602489, 40.080734],
					content: ""
				},
				mapevents: {
					// init: o => {
					// 	o.setMapStyle("amap://styles/" +
					// 		// eslint-disable-next-line no-undef
					// 		(self.themeName === "theme-turing" ? getStore({
					// 			name: 'mapId'
					// 		}) : "normal"));
					// }
				},
				slotStyle: {
					color: '#3993F8'
				},
			}

		},
		created() {
			this.firstPlace(this.latLud)
		},
		methods: {
			firstPlace(pos) {
				let self = this;
				let plceposi = [parseFloat(pos.split(",")[0]), parseFloat(pos.split(",")[1])];
				// eslint-disable-next-line no-undef
				let placemap = new AMap.Geocoder({
					radius: 1000,
					extensions: "all"
				});
				placemap.getAddress(pos.split(","), function(status, result) {
					if (status === 'complete' && result.info === 'OK') {
						if (result && result.regeocode) {
							self.mapCenter = plceposi;
							self.markers.position = plceposi;
							self.mwindows.position = [parseFloat(self.markers.position[0]), parseFloat(self.markers
								.position[1])];
							// self.mwindows.content = "<span style='color:rgba(255,255,255,0.5)'>" +
							// 	result.regeocode.formattedAddress+"</span>"";
						}
					}
				});
			},
			closeDialog() {
				this.$emit('isCloseMarker', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.marker-model {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2500;

		// overflow: auto;
		// padding-bottom: 110px;
		.model-content {
			padding-bottom: 50px;
			position: absolute;
			left: 50%;
			top: 30%;
			transform: translate(-50%, -50%);
			width: 53%;
			height: 400px;
			z-index: 2500;
			background: #01192E;

			//弹框关闭按钮
			.alarm-close {
				top: 20px;
				right: 20px;
				font-size: 30px;
				width: 17px;
				height: 19px;
				color: #3de6ff;
				position: absolute;
				z-index: 1001;
			}


			.alarm-title {
				margin-top: 29px;
				font-size: 18px;
				text-align: center;
				position: relative;

				.title-text {

					font-size: 18px;
					color: #3de6ff;
				}

			}

			.alarm-title::after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				top: 30px;
				opacity: 0.1;
				border: 1px solid #1ACFFF;
			}

			.amap-mark {
				margin-top: 30px;
			}

			// ::v-deep .amap-markers{
			// 	width: 21px;
			// 	height: 21px; 
			// 	background: url(../../static/img/marker.png) no-repeat;

			// }
			.amap-markers {
				width: 20px;
				height: 20px;
				background-color: red;
			}

		}

	}

	::v-deep .el-date-editor .el-range-input {
		background: #1ACFFF !important;
	}
</style>
